<template>
  <section class="components seat-setting">
    <data-grid :totalSpan="12" contentAlign="left" labelAlign="center">
      <data-grid-item :span="6" label="企业号">
        <el-input :disabled=" loginStatus " v-model.trim="userInfo.entId" class="origin-input agent-no" />
      </data-grid-item>
      <data-grid-item :span="6" label="坐席号码：">
        <el-input :disabled=" loginStatus " v-model.trim="userInfo.agentId" class="origin-input agent-no" />
      </data-grid-item>
      <data-grid-item :span="6" label="坐席密码：">
        <el-input type="password" :disabled=" loginStatus " v-model.trim="userInfo.agentPassword" class="origin-input agent-no" />
      </data-grid-item>
      <data-grid-item :span="6" label="sip电话：">
        <el-input :disabled=" loginStatus " v-model.trim="userInfo.agentNumber" class="origin-input agent-no" />
        <!-- <el-button :loading="loading" @click="onClick" style="margin-left:20px">{{loginStatus?'登出': '登录'}}</el-button> -->
        <el-button :loading="loading" @click="onClick" style="margin-left:20px" v-if="loginStatus" :disabled="isCalling  || currentStatus !== 'READY'">登出</el-button>
        <el-button :loading="loading" @click="onClick" style="margin-left:20px" v-else>登录</el-button>
        <!-- <el-button @click="logout">登出</el-button> -->
      </data-grid-item>
    </data-grid>
  </section>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit, Watch } from "vue-property-decorator";
import {
  getAgentStatus,
  getOtherEventTypeName
} from "~/utils/call-center/call-help";
import { DataGrid, DataGridItem } from "@zct1989/vue-component";
import { namespace } from "vuex-class";
import { StorageService } from "~/utils/storage.service";
import { callState } from '~/utils/call-center/state';

const callCenterStore = namespace("call-center");

@Component({
  name: "seat-setting",
  filters: {
    agentStatus: getAgentStatus
  },
  components: {
    DataGrid,
    DataGridItem
  }
})
export default class SeatSetting extends Vue {
  @callCenterStore.State private loginStatus!: boolean;
  @callCenterStore.Mutation private updateLogin!: (status: boolean) => void;
  @callCenterStore.State private currentStatus!: string;

  @Prop({ type: Boolean }) private visible

  private isCalling = false

  private userInfo = {
    entId: '',
    agentId: "",
    loginStatus: "",
    agentNumber: "",
    agentPassword: ''
  };

  private status = {
    agent: "1",
    line: false,
    call: false
  };

  private phoneNum = "";
  private callId = "";
  private loading = false
  private waChat: any = {}

  private toggleShowWechat () {
    this.waChat.toggle()
  }

  @Watch('visible', { immediate: true })
  private visibleChange (visible) {
    console.log('visible', visible);
    if (!visible) this.loading = false
    this.isCalling = callState.calling
  }


  private mounted () {
    let params: any = sessionStorage.getItem('webAgentLoginParmas')
    if (params) {
      params = JSON.parse(params)
      this.userInfo = params
    }

    // this.callOperator.onAgentEvent().subscribe(data => {
    //   this.status.agent = data.agentStatus;
    //   switch (data.agentStatus) {
    //     case "2":
    //       this.status.line = true;
    //       this.status.call = false;
    //       break;
    //     case "3":
    //       this.status.line = false;
    //       break;
    //   }
    // });

    // this.callOperator.onOtherEvent().subscribe(data => {
    //   this.$message(getOtherEventTypeName(data.eventType));
    // });

    // // 坐席这个地方不需要记录通话信息
    // this.callOperator.onMediaEvent().subscribe(data => {
    //   if (data.eventType === "1" && data.state === "2") {
    //     // 保存通话信息
    //     // data.filename
    //   }
    // });
  }

  @Emit("initWebAgent") private initWebAgent (data) { }
  @Emit("onCancel") private onCancel () { }
  @Emit("logout") private logout () { }


  private onClick () {
    const { entId, agentId, agentNumber, agentPassword } = this.userInfo


    if (this.loginStatus) {
      console.log('logout', this.logout);
      
      this.logout()
    } else {
      // 登录信息校验：
      if (!entId || !agentId || !agentNumber || !agentPassword) {
        this.$message.info('请输入完整的登录信息')
        return
      }
      // 去登录
      this.initWebAgent({ entId, agentId, agentPassword, "agentNumber": `${agentNumber}` })
      this.loading = true
      
    }

    // this.callOperator.login(this.userInfo.agentNo).subscribe(data => {
    //   if (data.handle) {
    //     this.updateLogin(true);
    //     this.callOperator.setUserStatus(false);
    //   } else {
    //     this.login();
    //   }
    // });
  }


  // private callOut () {
  //   if (!this.phoneNum) {
  //     return;
  //   }
  //   this.callOperator.callOut(this.phoneNum).subscribe(data => {
  //     if (!data) {
  //       this.$message("请操作软电话");
  //     } else {
  //       this.status.call = true;
  //       this.callId = data.sessionId;
  //     }
  //   });
  // }

  private hangUp () {
    // this.callOperator.hangUp().subscribe(x => {
    //   this.status.call = false;
    // });
  }
}
</script>

<style lang="less" >
.components.seat-setting {
  .origin-input {
    width: auto;
    &.agent-no {
      width: 120px;
    }
  }

  .call-button {
    min-width: unset !important;
    padding: 0 10px !important;
    line-height: 24px;
  }
}

#chat_pane {
  display: none !important;
}

#cchat {
  height: 580px;
}
</style>
